<div id="edit">
    <form class="form-horizontal" class="form-group post_form" style="display: block"
          ng-submit="updateSubmit()"
          name="update_form"
          role="form" method="post">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">标题</span>
                <input class="form-control" type="text" name="title" ng-model="post.title">
            </div>

        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">内容</span>
                <textarea class="form-control" name="content" ng-model="post.post"></textarea>
            </div>
        </div>
        <div class="form-group" style="display: block">
            <div class="input-group">
                <span class="input-group-addon">图片</span>

                <div class="pic_group">
                    <div id="preview-template" class="pull-left" style="display: none; ">
                        <div class="dz-preview dz-file-preview"
                             style="display:inline-block;width: 80px;height: 120px;margin: 5px; ">
                            <div class="dz-details" style="position: relative">
                                <div class="dz-filename" style="display: none;"><span data-dz-name></span></div>
                                <div class="dz-size" data-dz-size style="display: none;"></div>
                                <img data-dz-thumbnail
                                     style=" border:1px solid black;border-radius: 10px;display: inline-block;height: 120px;width: 80px"/>
                                <img class="remove_icon" src="/images/close.png" alt="Click me to remove the file."
                                     data-dz-remove style="position: absolute;top: 40%;right: 34%"/>
                            </div>
                            <div class="dz-progress" style="display: none;"><span class="dz-upload"
                                                                                  data-dz-uploadprogress></span></div>
                            <div class="dz-success-mark" style="display: none;"><span>?</span></div>
                            <div class="dz-error-mark" style="display: none;"><span>?</span></div>
                            <div class="dz-error-message"><span data-dz-errormessage></span></div>

                        </div>
                    </div>
                    <div class="dropzone-previews pull-left">
                    </div>
                    <div id="uploadImg" class="pull-left"
                         style="position:relative;width: 80px;height: 120px;margin: 5px;border:1px solid black;border-radius:5px;">
                        <span class="glyphicon glyphicon-plus" style="position: absolute;top: 44%;right: 44%"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center">
            <button type="submit" class="btn btn-primary  ">提交</button>
            <a href="/admin" class="btn btn-primary ">取消</a>
        </div>
    </form>

</div>
<script>
    $("div#uploadImg").dropzone({
        url: "/upload/img",
        addRemoveLinks: true,
        acceptedFiles: 'image/*',
        previewsContainer: '.dropzone-previews',
        previewTemplate: $('#preview-template').html(),
        dictRemoveFile: '',
        dictCancelUpload: '',
        maxFilesize: 5,
        maxFiles: 4,
        thumbnailWidth: 80,
        thumbnailHeight: 120,
        init: function () {
            var dz = this;
            angular.imgs=[];
            this.on('success', function (file, info) {
                angular.imgs.push({id:(file.name + file.uploadtime),value:info});
            });
            this.on('removedfile', function (file) {
                for(var i=0;i<angular.imgs.length;i++){
                    if( angular.imgs[i].id==(file.name + file.uploadtime)){
                        angular.imgs.splice(i, 1);
                    }
                }

            });
            this.on('maxfilesexceeded', function (file) {
                dz.removeFile(file);
            });
            $(".close").on('click', function () {
                dz.removeAllFiles();
            });
            $(".img_btn").click(function () {
                $("#imgupload").toggle();
            })
        }
    });
</script>